<template>
  <el-dialog title="选择商品" v-model="selectDialogVisible" width="50%">
    <el-input v-model="listQuery.keyword" style="width: 250px; margin-bottom: 20px" size="small" placeholder="商品名称搜索">
      <template #append>
        <el-button :icon="Search" @click="handleSelectSearch"></el-button>
      </template>
    </el-input>
    <el-table :data="list" height="100%" @selection-change="handleDialogSelectionChange" border>
      <el-table-column type="selection" width="60" align="center" fixed></el-table-column>
      <el-table-column label="商品名称" align="center" min-width="250" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="货号" width="160" align="center">
        <template #default="scope">NO.{{ scope.row.productSn }}</template>
      </el-table-column>
      <el-table-column label="价格(元)" width="120" align="center">
        <template #default="scope">{{ scope.row.price }}</template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleDialogSizeChange"
        @current-change="handleDialogCurrentChange"
        layout="prev, pager, next"
        v-model:current-page="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :total="total"
      >
      </el-pagination>
    </div>
    <div style="clear: both"></div>
    <template #footer>
      <el-button size="small" @click="selectDialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSelectDialogConfirm">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { fetchList as fetchProductList } from '@/api/product'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { Product, ProductPageParams } from '@/models/product'

const emit = defineEmits(['select'])
const selectDialogVisible = ref(false)
const list = ref<Product[]>([])
const multipleSelection = ref<Product[]>([])
const total = ref(0)
const listQuery = ref<ProductPageParams>({ pageNum: 1, pageSize: 10 })

async function getDialogList() {
  const response = await fetchProductList(listQuery.value)
  list.value = response.data.data.list
  total.value = response.data.data.total
}

function handleSelectSearch() {
  getDialogList()
}
function handleDialogSizeChange(val: number) {
  listQuery.value.pageNum = 1
  listQuery.value.pageSize = val
  getDialogList()
}
function handleDialogCurrentChange(val: number) {
  listQuery.value.pageNum = val
  getDialogList()
}
function handleDialogSelectionChange(val: Product[]) {
  multipleSelection.value = val
}
function handleSelectDialogConfirm() {
  if (multipleSelection.value.length < 1) {
    ElMessage.warning('请选择一条记录')
    return
  }
  const selectProducts = multipleSelection.value.map((item) => ({
    productId: item.id,
    productName: item.name,
  }))
  emit('select', selectProducts)
  selectDialogVisible.value = false
  multipleSelection.value = []
}
function open() {
  selectDialogVisible.value = true
  getDialogList()
}
defineExpose({
  open,
})
</script>

<style scoped></style>
